<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div id="app"> 
  <!-- 1.事件调用的方法没有参数 -->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>

  <!-- 2.在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候Vue会默认将浏览器生成的event对象
  作为参数传入到方法 -->
  <!-- <button @click="btn1Click(123)">按钮2</button> -->
  <!-- <button @click="btn1Click()">按钮2</button> -->
  <button @click="btn2Click">按钮2</button>

  <!-- 3.方法定义时，我们需要event对象，同时有需要其他参数 -->
  <!-- 在调用方法时，如何手动的获取到浏览器参数的event对象：$event -->
  <button @click="btn3Click(abc, $event)">按钮3</button>
</div>
  
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',//用于挂载要管理的元素
    data: {
      message: '你好啊',
      abc: 123
    },
    methods: {
      btn1Click() {
        console.log("btn1Click")
      },
      btn2Click(event) {
        console.log('----------', event)
      },
      btn3Click(abc, event) {
        console.log('++++++++++',abc, event)
      }
    }
  })

  //如果函数需要参数，但是没有传入，那么函数的形参为undefined
  // function abc(name) {
  //   console.log(name)
  // }

  // abc()
</script>

</body>
</html>